<template>
    <div class="hair">
        <hair-title></hair-title>
      <hair-top></hair-top>
      <hair-mida></hair-mida>
      <hair-midb :list="recommendList"></hair-midb>
      <hair-btn></hair-btn>
    </div>
</template>
<script>
import HairTitle from './components/HairTitle.vue'
import HairTop from './components/HairTop.vue'
import HairMida from './components/HairMida.vue'
import HairMidb from './components/HairMidb.vue'
import HairBtn from './components/HairBtn.vue'
import axios from 'axios'
export default {
    name:'hair',
    components:{
        HairTitle,
        HairTop,
        HairMida,
        HairMidb,
        HairBtn
    },
     data: function(){
        return{
        
          recommendList: []
        }
    }, 
    mounted(){
      this.getHomeApiInfo()
    },
    methods:{
      getHomeApiInfo(){
          axios.get("../../mock/hair.json").then(this.getHomeResponseInfo)
      },
        getHomeResponseInfo(response){
        //  console.log(response.data);
        let res = response.data  //就是home.json里面的内容
        console.log(res);
        console.log(res.success);//undefined =>???
        console.log(res.dataList);//undefined =>???
        if(res.success && res.dataList){
          const data = res.dataList //取json中的datalist属性
          // console.log(data.iconLists.length)
          this.iconList = data.iconLists
          this.recommendList = data.recommendLists
        }
      }
 }
}
</script>


